articles

Home / DeveloperSection / Articles / Style and Theme in Android

Style and Theme in Android

Manoj Pandey2873 24-Feb-2015

Android allow you to define the look and feel, for example colors and fonts, of Android components in XML resource files. This way you have to set common style attributes only once in one central place.

A style is a properties of view in android which specify the format of view.

A style is a set of one or more formatting attributes that you can apply as a unit to single elements in your layout XML file(s). For example, you could define a style that specifies a certain text size and color, then apply it to instances of a certain type of View element.

A theme is a set of one or more formatting attributes that you can apply as a unit to all activities in an application or just a single activity. For example, you could define a theme that sets specific colors for the window frame and the panel foreground and background, and sets text sizes and colors for menus, then apply it to the activities of your application.

You can add your custom style and theme in res/style.xml file

Here I am creating sample application with custom styles and themes.

1.      Create an Android application

2.      Go to the res\values\styles.xml

3.      Add style. i.e.

Add style for button

<style name="btnStyle">

        <item name="android:layout_marginTop">30sp</item>

        <item name="android:capitalize">characters</item>

        <item name="android:typeface">monospace</item>

        <item name="android:shadowDx">1.2</item>

        <item name="android:shadowDy">1.2</item>

        <item name="android:shadowRadius">2</item>

        <item name="android:textColor">@android:color/holo_red_light </item>

        <item name="android:shadowColor">#000000</item>

    </style>

 

Add style for TextView

<style name="textviewStyle">

        <item name="android:textColor">#477519</item>

        <item name="android:background">#D17519</item>

        <item name="android:textSize">22sp</item>

        <item name="android:typeface">monospace</item>

        <item name="android:gravity">center</item>

        <item name="android:layout_width">fill_parent</item>

        <item name="android:padding">5sp</item>

    </style>

                                 

Add style for Spinner

<style name="SpinnerStyle" parent="@android:style/Widget.Spinner. DropDown">

        <item name="android:gravity">center</item>

        <item name="android:layout_marginTop">20sp</item>

        <item name="android:textColor">#477519</item>

    </style>

 

Add style for Edittext

<style name="EditTextStyle">

<item name="android:layout_marginTop">20sp</item>

 <item name="android:textColor">@android:color/holo_red_light</item>

 <item name="android:hint">Enter Your Name</item>

<item name="android:layout_width">fill_parent</item>

 </style>

 

Add style in view

<TextView

        style="@style/textviewStyle"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content">



4. My activity_main.xml 


 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".MainActivity" >

 

    <TextView

        style="@style/textviewStyle"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="@string/android" />

 

    <Spinner

        android:id="@+id/spinner"

        style="@style/SpinnerStyle"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:prompt="@string/prompt" />

 

    <EditText

        style="@style/EditTextStyle"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content" />

 

    <Button

        style="@style/btnStyle"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="@string/hello_world" />

 

</LinearLayout>

 

Run your application

 

Style and Theme in Android

 

For apply all view

 

<style name="myTheme" parent="AppBaseTheme">

         <!-- All customizations that are NOT specific to a particular API-level can go here. -->

        <item name="android:capitalize">characters</item>

        <item name="android:typeface">monospace</item>

        <item name="android:shadowDx">1.2</item>

        <item name="android:shadowDy">1.2</item>

        <item name="android:shadowRadius">2</item>

        <item name="android:textColor">@android:color/holo_red_light</ item>

        <item name="android:shadowColor">#000000</item>

    </style>

And change theme from AndroidManifest.xml file 

<application

        android:allowBackup="true"

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name"

        android:theme="@style/myTheme" >

Run your application  

Style and Theme in Android


Updated 07-Sep-2019

Leave Comment

Comments

Liked By